<template>
<div class="active-basic">
    <div class="common-form">{{$t('plus.field_info')}}</div>
    <el-form-item :label="$t('plus.field_management')" prop="tableData">
      <el-button icon="Plus" @click="addField">{{$t('plus.add_field')}}</el-button>
      <div class="pt16">
        <div class="d-a-c border-t border-l border-r">
          <div style="width: 40px;" class="d-c-c border-r">{{$t('plus.sort')}}</div>
          <div style="min-width: 200px;" class="flex-1 d-c-c border-r">{{$t('plus.name')}}</div>
          <div style="width: 200px;" class="d-c-c border-r">{{$t('plus.type')}}</div>
          <div style="min-width: 200px;" class="flex-1 d-c-c border-r">{{$t('plus.options_comma')}}</div>
          <div style="width: 40px;" class="d-c-c border-r">{{$t('plus.required')}}</div>
          <div style="width: 200px;" class="d-c-c border-r">{{$t('plus.validation_type')}}</div>
          <div style="width: 80px;" class="d-c-c">{{$t('plus.action')}}</div>
        </div>
        <draggable class="wrapper border-b" v-model="form.tableData"> 
          <template #item="{  element,  index}">
            <div class="d-a-c border-t border-l border-r">
              <div class="icon iconfont icon-tuodong d-c-c p6 border-r" style="width: 40px;"></div>
              <div style="min-width: 200px;"  class="flex-1 p6 border-r d-c-c">
                <el-input type="text" v-model="element.name"></el-input>
              </div>
              <div style="width: 200px;" class="d-c-c p6 border-r">
                <el-select v-model="element.type" :placeholder="$t('plus.please_select')">
                  <el-option v-for="(fitem, findex) in fields" :key="findex" :label="fitem.name" :value="fitem.type">
                  </el-option>
                </el-select>
              </div>
              <div style="min-width: 200px;"  class="flex-1 p6 d-c-c border-r">
                <el-input type="text" v-model="element.selectValue"
                  :disabled="element.type != 'radio' && element.type != 'radio-group' && element.type != 'select'">
                </el-input>
              </div>
              <div style="width: 40px;" class="d-c-c p6 border-r">
                <el-checkbox v-model="element.isRequired"></el-checkbox>
              </div>
              <div style="width: 200px;" class="d-c-c p6 border-r">
                <el-select v-model="element.rule" :placeholder="$t('plus.please_select')">
                  <el-option v-for="(ritem, rindex) in rules" :key="rindex" :label="ritem.name" :value="ritem.type">
                  </el-option>
                </el-select>
              </div>
              <div style="width: 80px;" class="d-c-c p6">
                <el-button type="text" size="small" @click.stop="deleteItem(index)">{{$t('plus.delete')}}</el-button>
              </div>
            </div>
          </template>
        </draggable>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  },
  props: {
    form: Object
  },
  data() {
    return {
      fields: [{
        name: $t("plus.single_line_text"),
        type: 'text'
      }, {
        name: $t("plus.multi_line_text"),
        type: 'textarea'
      }, {
        name: $t("plus.radio"),
        type: 'radio'
      }, {
        name: $t("plus.checkbox"),
        type: 'radio-group'
      }, {
        name: $t("plus.dropdown"),
        type: 'select'
      }, {
        name: $t("plus.image"),
        type: 'image'
      }, {
        name: $t("plus.region_select"),
        type: 'area'
      }, {
        name: $t("plus.time_picker"),
        type: 'time'
      }],
      rules: [{
        name: $t("plus.no_validation"),
        type: 'no'
      }, {
        name: $t("plus.number"),
        type: 'number'
      }, {
        name: $t("plus.phone_number"),
        type: 'mobile'
      }, {
        name: $t("plus.phone_or_landline"),
        type: 'phone'
      }, {
        name: $t("plus.email"),
        type: 'email'
      }, {
        name: $t("plus.id_card"),
        type: 'idcard'
      }]
    };
  },
  methods: {
    addField() {
      this.form.tableData.push({
        name: '',
        type: 'text',
        isRequired: true,
        rule: 'no'
      });
    },
    deleteItem(index) {
      this.form.tableData.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.mb8 {
  margin-bottom: 8px;
}
.p6 {
  padding: 6px;
}
</style>

